<script setup lang="ts">
import { defineAsyncComponent, watch } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import { compMap } from "../../../../assets/componentMap";

defineOptions({
  name: "ComplexComp"
});
const props = withDefaults(
  defineProps<{
    propValue?: {
      titleList: Array<any>;
      contentList: Array<any>;
      title?: string;
      iconName?: string;
    };
  }>(),
  {
    propValue: () => ({
      iconName: "",
      titleList: [],
      contentList: [],
      title: ""
    })
  }
);
let compArr = ["humidity", "methane", "temperature"];
const imgMap = {};
for (let i = 0; i < compArr.length; i++) {
  let comp = defineAsyncComponent(() => import(`../../assets/${compArr[i]}.svg?component`));

  imgMap[compArr[i]] = comp;
}
watch(
  props,
  () => {
    console.log("ComplexComp", props);
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<template>
  <leftCompWrapper :title="props.propValue.title" :iconName="propValue.iconName">
    <div>
      <div v-for="(item, index) in props?.propValue.contentList" :key="item.type ? item.type : index" class="item">
        <div class="px-[16px]">
          <div class="list-item-title">{{ item.name }}</div>
          <component :is="compMap[item.frontComponent]?.value" :noWrapper="true" :propValue="{ contentList: item.attrs }" />
        </div>
      </div>
    </div>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
.item {
  .list-item-title {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: #000;

    &::before {
      display: inline-block;
      width: 3px;
      height: 16px;
      margin-right: 6px;
      vertical-align: middle;
      content: "";
      background: #3b82f6;
      border-radius: 0 100px 100px 0;
    }
  }

  .list-item-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    line-height: 17px;
    color: #000;

    .list-item-content-item {
      display: flex;
      align-items: center;
      width: 33%;

      .list-item-val-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: normal;

        .list-item-content-val {
          align-self: start;
          margin-top: 4px;
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
  }

  .list-item-content-error {
    color: #f87171;
  }

  .list-item-content-warn {
    color: #fbbf24;
  }

  .list-item-content-normal {
    color: #000;
  }
}
</style>
